<template>
  <view class="content">
    <view class="content-item">
      <view class="title">用户注册</view>
      <view class="form">
        <uv-form :model="form" label-width="70px"
                 ref="uForm"
                 label-style="width: 200px">
          <uv-form-item label="用户名" prop="name">
            <uv-input v-model="form.user_name" placeholder="请输入用户名"></uv-input>
          </uv-form-item>
          <uv-form-item label="密码" prop="pwd1">
            <uv-input v-model="form.password" placeholder="请输入密码" password style="width: 100%;"></uv-input>
          </uv-form-item>
        </uv-form>
      </view>
      <view class="text" @click="jumpFn">有账号，去登录？</view>
      <view class="btn">
        <uv-button text="注册" type="primary"
                   @click="registerFn"
                   style="margin-top: 15px; width: 100%;"></uv-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import {Register}  from "@/request/api"
const uForm = ref(null)
const form = ref({
  user_name: "",
  password: "",
});
const registerFn = () => {
  uForm.value.validate().then(res => {
    uni.showLoading({
      title: '注册中...'
    });

    Register(form.value)
        .then(response => {
          uni.hideLoading(); // 成功后隐藏加载提示
          // 检查返回的 code
          if (response.code === "1002") {
            uni.showToast({
              icon: 'error',
              title: '用户名已经存在'
            });
            return; // 结束函数
          }

          setTimeout(() => {
            uni.showToast({
              title: '注册成功！'
            });

            // 显示注册成功的模态框
            uni.showModal({
              title: "温馨提示",
              content: "注册成功，是否跳转登录?",
              success(res) {
                if (res.confirm) {
                  // 用户选择确认，跳转到登录页面
                  uni.navigateTo({
                    url: "/pages/login/login"
                  });
                } else {
                  // 用户选择取消，不跳转
                  console.log("用户选择不跳转");
                }
              }
            });
          }, 1000);
        })
        .catch(err => {
          uni.hideLoading();
          uni.showToast({
            icon: 'error',
            title: '注册失败，请重试！'
          });
          console.error(err);
        });
  }).catch(validationError => {
    uni.showToast({
      icon: 'error',
      title: '表单验证失败'
    });
    console.error(validationError);
  });
}
const jumpFn = () => {
  uni.navigateTo({
    url: "/pages/login/login"
  });
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  .content-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
    .title{
      margin-bottom: 20px;
      text-align: center;
      font-weight: bold;
      font-size: 30px;
    }
    .form{
      width: 100%;
    }
    .text{
      display: flex;
      width: 100%;
      justify-content: flex-end;
      margin: 15px 0;
    }
    .btn{
      width: 100%;
    }
  }
}


</style>